<template>


  <div>action_2_9_9_slot.vue</div>
  <action_2_9_9_slot_main>
    <div>
          <pre>
            大江东去，浪花淘尽，千古风流人物。 进入子组件的默认插槽
          </pre>
    </div>
    <template #footer>
      <div>
          <pre>
            我是一个兵 footer。
          </pre>
      </div>
    </template>
    <template #header>
      <div>
          <pre>
            我是一个将军 header。
          </pre>
      </div>
    </template>
  </action_2_9_9_slot_main>

  <hr>

  <action_2_9_9_slot_echo :todos="todos">
    <template v-slot="{$row,$index}">
      <h1 :style="{color:$row.done?'green':'red'}">{{ $row.title }}--{{ $index }}</h1>
    </template>
  </action_2_9_9_slot_echo>

</template>
<script setup>
import {ref} from "vue";

let todos = ref([
  {id: 1, title: '吃饭', done: true},
  {id: 2, title: '睡觉', done: false},
  {id: 3, title: '打豆豆', done: true},
  {id: 4, title: '打游戏', done: false}
]);
import Action_2_9_9_slot_main from "@/views/inAction/action_2/action_2_9_9_slot_main.vue";
import Action_2_9_9_slot_echo from "@/views/inAction/action_2/action_2_9_9_slot_echo.vue";
</script>

<style scoped>

</style>
